<template>
   <div style="height: 100%" v-loading="loading">
       <!-- <vue-office-docx
           :src="docx"
           style="height: 100vh;"
           @rendered="renderedHandler"
           @error="errorHandler"
       /> -->

       <!-- <div style="height: 100vh;" v-html="convertedHtml"></div> -->
       <iframe class="ifr" v-if="doc" :src="doc" width="100%" height="100vh" frameborder="0"></iframe>

       <NeedPay :query="query" />

       <!-- <div class="disbaled-cover" v-if="needpay">
        <div class="price-box">
          <el-button round type="danger" @click="toVip">{{ fee }}解锁</el-button>
        </div>
        </div> -->
   </div>
</template>

<script>
import { useRoute } from 'vue-router';
import mammoth from "mammoth";

import NeedPay from './NeedPay.vue';
import wx from 'weixin-js-sdk';
//引入相关样式
//import '@vue-office/docx/lib/index.css'
export default {
    name: "VueOfficeDocxDemo",
    components: {
        //VueOfficeDocx,
        NeedPay
    },
    data() {
        return {
            loading: false,
         
            convertedHtml: '',
            doc: '', //http://static.shanhuxueyuan.com/test.docx

            // fee: '',
            // needpay: true

            query: {}
        }
    },
    methods: {
        async loadDocx(url){
            const response = await fetch(url);
            const arrayBuffer = await response.arrayBuffer();
            const result = await mammoth.convertToHtml({ arrayBuffer });
            this.convertedHtml = result.value;
        },


        renderedHandler() {
            this.loading = false;
            console.log("渲染完成")
        },
        errorHandler() {
            this.loading = false;
            console.log("渲染失败")
        },
        toVip(){
            wx.miniProgram.navigateTo({
                url: `/pages/mine/vip/vip`
            })
        }
    },
    created(){
        const route = useRoute();
        console.log('query', route.query);
        if(route.query.file){
            this.doc = `https://view.officeapps.live.com/op/view.aspx?src=${decodeURIComponent(route.query.file)}`;
            //this.loadDocx('http://192.168.1.45:8081/test.doc' || decodeURIComponent(route.query.file))
        }
        //this.loadDocx('http://imgtu.oss-cn-beijing.aliyuncs.com/docx/2025_02_09/3883643b845b49c38b8e198ccd063721.docx' || decodeURIComponent(route.query.file))

        this.query = route.query;
        // this.needpay = route.query.np == 1;
        // this.fee = route.query.pri || 0;
    }
};
</script>

<style scoped>
.disbaled-cover{
  position: fixed;
  top: 0; right: 0;bottom: 0;left:0;
  background: linear-gradient(to bottom, rgba(255,255,255, 0) 50%, rgba(255,255,255, 1) 70%, rgba(255,255,255, 1));
  z-index: 100;
}
.price-box{
  position: absolute;
  left:0;right:0;bottom: 0;
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: center;

}
/* .ifr{
    position: absolute;
    left:0;top:0;
} */
</style>